<div style="width:1080px;height:600px;" id="worldmap">
	
</div>

<script>
	require(['js/lib/charts/echarts.min.js'] ,function (echarts){
		window.echarts = echarts

		require(['module/demo_show/world.js'] ,function (world){
			
		})
		setTimeout(test ,1000)
	})


function test()
{
var BJData = [
				[{
					name: 'Japan',
					value: 9100
				}, {
					name: 'China'
				}],
				[{
					name: 'Bhutan',
					value: 2370
				}, {
					name: 'China'
				}],
				[{
					name: 'Brunei',
					value: 3130
				}, {
					name: 'China'
				}],
				[{
					name: 'Canada',
					value: 2350
				}, {
					name: 'China'
				}],
				[{
					name: 'Colombia',
					value: 5120
				}, {
					name: 'China'
				}],
				[{
					name: 'Cyprus',
					value: 3110
				}, {
					name: 'China'
				}],
				[{
					name: 'Finland',
					value: 6280
				}, {
					name: 'China'
				}],
				[{
					name: 'France',
					value: 7255
				}, {
					name: 'China'
				}],
				[{
					name: 'Gambia',
					value: 8125
				}, {
					name: 'China'
				}],
				[{
					name: 'Israel',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Kuwait',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Malta',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Poland',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'United States of America',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Pakistan',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Libya',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Liberia',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Lesotho',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Lebanon',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Latvia',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Laos',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Kyrgyzstan',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'South Korea',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'North Korea',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Brazil',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Cambodia',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Chile',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Cuba',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Egypt',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Germany',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Ghana',
					value: 3590
				}, {
					name: 'China'
				}],
				[{
					name: 'Greece',
					value: 3590
				}, {
					name: 'China'
				}],
				];

				var convertData = function(data) {
					var res = [];
					for (var i = 0; i < data.length; i++) {
						var dataItem = data[i];
						var fromCoord = countryCapitalCroodMap[dataItem[0].name];
						var toCoord = countryCapitalCroodMap[dataItem[1].name];
						if (fromCoord && toCoord && fromCoord instanceof Array && toCoord instanceof Array) {
							res.push([{
								coord: fromCoord,
								value: dataItem[0].value
							}, {
								coord: toCoord,
							}]);
						}
					}
					return res;
				};

				var currentData = [];

				var icount = 0;

				var myEchart = null;

				dodraw()

				function dodraw(){
					if(myEchart){
						myEchart.dispose();
					}

					if(icount >= 40){
						icount = 0;
					}
					if(icount == 32){
						currentData.splice(0,currentData.length)
						var tempData = BJData.slice(0,32);
						tempData.map(function (item,index){
							currentData.push(item)
						})
					}else {
						currentData.splice(0,currentData.length)
						var tempData = BJData.slice(icount,icount+8);
						tempData.map(function (item,index){
							currentData.push(item)
						})
					}
					icount += 8;

					myEchart = echarts.init(document.getElementById('worldmap'));

					var mapcolor = [];
					for(var i=0;i<currentData.length;i++){
						var data = currentData[i];
						if(data[0].value == 0){
						}else if(data[0].value > 0 && data[0].value <= 2500){
							mapcolor.push({
								name: data[0].name,
								itemStyle: {
									normal: {
										areaColor: 'rgb(233,207,33)',
										// areaColor: '#8dc1a9',
									}
								}
							});
						}else if(data[0].value > 2500 && data[0].value <= 5000){
							mapcolor.push({
								name: data[0].name,
								itemStyle: {
									normal: {
										areaColor: 'rgb(233,207,33)',
										// areaColor: '#e69d87',
									}
								}
							});
						}else if(data[0].value > 5000 && data[0].value <= 7500){
							mapcolor.push({
								name: data[0].name,
								itemStyle: {
									normal: {
										areaColor: 'rgb(233,207,33)',
										// areaColor: '#ea7e53',
									}
								}
							});
						}else if(data[0].value > 7500){
							mapcolor.push({
								name: data[0].name,
								itemStyle: {
									normal: {
										areaColor: 'rgb(233,207,33)',
										// areaColor: '#dd6b66',
									}
								}
							});
						}
					}

					mapcolor.push({
						name: 'China',
						itemStyle: {
							normal: {
								areaColor: 'rgb(203,66,44)',
							}
						}
					});

					var series = [];
					[['China', currentData]].forEach(function(item, i) {
						series.push(
						{
							type: 'lines',
							zlevel: 2,
							effect: {
					                show: true,
					                period: 9,
					                trailLength: 0,
					                color: '#fff',
					                delay : 1000
					            },
					            lineStyle: {
					                normal: {
					                	color:'#cf1322',
					                	width: 1,
					                	opacity: 0.6,
					                	curveness: 0.2
					                }
					            },
					            data: convertData(item[1])
					        },
					        {
					        	type: 'lines',
					        	zlevel: 1,
					        	effect: {
					        		show: true,
					        		period: 9,
					        		trailLength: 0.7,
					        		color: '#fff',
					        		symbolSize: 3,
					        		delay : 1000
					        	},
					        	lineStyle: {
					        		normal: {
					        			color:'#a6c84c',
					        			width: 0,
					        			curveness: 0.2
					        		}
					        	},
					        	data: convertData(item[1])
					        },
					        //被攻击点
					        {
					        	type: 'effectScatter',
					        	coordinateSystem: 'geo',
					        	zlevel: 2,
					        	rippleEffect: {
					        		period: 4,
					        		brushType: 'stroke',
					        		scale: 6
					        	},
					        	label: {
					        		normal: {
					        			show: false,
					        			position: 'right',
					                    //offset:[5, 0],
					                    color: '#00ffff',
					                    formatter: '{b}',
					                    textStyle: {
					                    	color: "#00ffff"
					                    }
					                },
					                emphasis: {
					                	show: true
					                }
					            },
					            symbol: 'circle',
					            symbolSize: 7,
					            itemStyle: {
					            	normal: {
					            		show: true,
					            		color: '#fff'
					            	}
					            },
					            data: [{
					            	name: countryNameMap[item[0]],
					            	value: countryCapitalCroodMap[item[0]].concat([100]),
					            }],
					        }
					        );
					});
					var option = {
						// visualMap: {
						// 	min: 0,
						// 	max: 10000,
						// 	calculable: true,
						// 	show: false,
						// 	color: ['#ff3333'/*, 'orange', 'yellow', 'lime', 'aqua'*/],
						// 	textStyle: {
						// 		color: '#fff'
						// 	}
						// },
						geo: {
							map: 'world',
							label: {
								emphasis: {
									show: false
								}
							},
							top: 10,
							bottom: 10,
							silent: true,
							regions: mapcolor,
							itemStyle: {
								normal: {
									color: 'rgba(0,0,0,0.17)',
									borderColor: 'rgba(43,130,224,0.65)'
								},
								emphasis: {
									color: 'rgba(37, 43, 61, .5)'
								}
							}
						},
						series: series
					};

					myEchart.setOption(option);
				}	
}

	
</script>